<template>
    <div class="login-div">
        <div>
            <h3 class="login-title">系统登录</h3>

            <el-form :model="formData" ref="form" :rules="rules" label-width="80px" :inline="false">
                <el-form-item label="账户：" prop="uname">
                    <el-input v-model="formData.uname"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="upass">
                    <el-input v-model="formData.upass"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(form)">登录</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import useSys from '@/store/useSys'
import axios from 'axios'
let router = useRouter();
let sys = useSys();
//表单里面的数据模型
let formData = ref({})
//表单引用，用于调用表单对象的
let form = ref(null)
//验证表单里面的规则
let rules = {
    uname: [
        { required: true, message: "账户不能为空" },
        { pattern: /^[a-zA-Z]{5,}$/, message: "账户必须是字母，且5位或者以上。" }
    ],
    upass: [
        { required: true, message: "账户不能为空" }
    ]
}
let onSubmit = (formEl) => {
    formEl.validate(v => {
        if (v) {
            sys.login(formData.value.uname, formData.value.upass).then(resp => {
                if (resp) {
                    console.log("跳转到首页")
                    router.push("/")
                }
            })
            // axios({
            //     url: "http://localhost:8080/submitLogin",
            //     method: "post",
            //     params: {
            //         username: formData.value.uname,
            //         password: formData.value.upass
            //     }
            // }).then(resp => {
            //     console.log(resp)
            // });
        }
    });
}
</script>

<style scoped>
.login-div {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-title {
    text-align: center;
    color: red;
}
</style>
